<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的浮动</title>
<style>
.box{border:2px solid #000; width:400px; height:400px; margin:30px auto;}
.purple{background-color:#ff00ff; width:296px; height:296px; margin:2px;}
.yellow,.green{width:100px; height:100px;}
.yellow{background-color:#77cc11;}
.green{background-color:#ffff00;}
.div1 div{float:left;}
.div2 div{float:right;}
</style>
</head>
<body>
<div class="box">
  <div class="div1">
    <div class="purple">第1块</div>
    <div class="green">第2块</div>
    <div class="yellow">第3块</div>
    <div class="green">第4块</div>
  </div>
  <div class="div2">
    <div class="yellow">第5块</div>
    <div class="green">第6块</div>
    <div class="yellow">第7块</div>
    <div class="green">第8块</div>
  </div>
</div>
</body>
</html>
